<template>
  <div class="container">
    <header-nav></header-nav>
    <!-- 页面整体内容 -->
    <div class="content-box">
      <!-- 面包屑 -->
      <div class="nav">
        <span @click="$router.push('/')">首页</span>>
        <span>科技成果</span>
      </div>
      <!-- 地区选择 -->
      <div class="select-address-box">
        <div class="select-box">
          <div class="select-list">
            <!-- 省级 -->
            <div class="select-item flex flex-start">
              <div class="item-lable">地区：</div>
              <div v-if="provinceLevel > -1" class="item-info" ref="policyMore">
                <span class="active">
                  {{ regionData[provinceLevel].value }}
                  <img
                    src="@/static/image/region_cha.png"
                    @click="provinceEmpty"
                  />
                </span>
              </div>
              <div v-else class="item-info" ref="policyMore">
                <span @click="provinceActive(-1)" :class="provinceLevel == -1 ? 'active' : ''">全部</span>
                <span
                  :class="provinceLevel == index ? 'active' : ''"
                  v-for="(item, index) in regionData"
                  :key="index"
                  @click="provinceActive(index)"
                >{{ item.value }}</span>
              </div>
              <div
                v-if="provinceLevel == -1 && judgeWords(regionData, 1)"
                class="more"
                @click="MoreEvent('policyMore')"
              >
                <span ref="policyMore1">更多</span>
                <img ref="policyMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
            <!-- 市级 -->
            <div v-if="provinceLevel > -1" class="select-item flex flex-start">
              <div class="item-lable"></div>
              <div class="item-info" ref="cityMore">
                <span @click="cityActive(-1)" :class="cityLevel === -1 ? 'active' : ''">全部</span>
                <span
                  :class="cityLevel === index ? 'active' : ''"
                  v-for="(item, index) in regionData[provinceLevel].children"
                  :key="index"
                  @click="cityActive(index)"
                >{{ item.value }}</span>
              </div>
              <div
                v-if="judgeWords(regionData[provinceLevel].children, 2)"
                class="more"
                @click="MoreEvent('cityMore')"
              >
                <span ref="cityMore1">更多</span>
                <img ref="cityMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
          </div>
          <!-- 时间 -->
          <div class="select-list">
            <div class="select-item flex space-between">
              <div class="select-input flex">
                <div class="item-lable">发布时间：</div>
                <div class="key-input flex items-middle">
                  <el-date-picker
                    v-model="createTime"
                    type="date"
                    placeholder="请选择时间"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width:300px"
                    @change="getList(1)"
                  ></el-date-picker>
                </div>
              </div>
            </div>
          </div>
          <!-- 输入框搜索 -->
          <div class="select-list">
            <div class="select-item flex space-between">
              <div class="select-input flex">
                <div class="item-lable">关键字：</div>
                <div class="key-input flex items-middle">
                  <input placeholder="请输入关键字" v-model="searchKey" />
                  <span @click="getList(1)">搜索</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="list-container">
        <div class="list-header flex items-middle">
          <div class="name lable">成果名称</div>
          <!-- <div class="depart lable">发布部门</div> -->
          <div class="data lable">发布日期</div>
        </div>
        <div v-show="notYet" v-loading="loading" class="list-content-box">
          <div class="list-item flex items-middle" v-for="(item, index) in listData" :key="index">
            <div class="item-info name-info flex items-middle">
              <a
                :href="`./achievDetail/${item.id}`"
                target="_blank"
                v-html="searchHighlight(item.achievementsName)"
              ></a>
            </div>
            <div class="item-info data-info">{{ item.createTime }}</div>
          </div>
        </div>
        <no-data v-show="!notYet"></no-data>
      </div>
      <!-- 分页 -->
      <div class="page-content">
        <paging ref="page" @CurrentPage="changePageNo" :total="total" :pageNo="pageNo"></paging>
      </div>
    </div>
    <navigation></navigation>
    <footer-nav></footer-nav>
  </div>
</template>
<script>
import { achievementsList, resultAreaInfo } from "../../api/api.js";
import { sessionTake } from "../../util/validate.js";
import noData from "../../components/NoData.vue"; //升级vip弹窗
import paging from "../../components/PageQuery";
export default {
  name: "policyNotice",
  components: {
    noData,
    paging
  },
  data() {
    return {
      regionData: [], //地区数据
      provinceLevel: -1, // 省级选中
      cityLevel: -1, // 市级选中
      searchKey: "", // 关键字
      createTime: "",
      listData: [], // 列表数据
      total: 0, //列表总数

      pageNo: 1,
      loading: true, // 显示loading
      notYet: true,
      provinceName: "",
      cityName: ""
    };
  },
  head() {
    return {
      title: "科技成果-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "科技成果,地区" },
        { hid: "description", name: "description", content: "科技成果,地区" }
      ]
    };
  },
  computed: {
    // 是否展示取消选择地区图标
    isShowError() {
      let params = this.$store.state.cityInfo;
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        return false;
      }
    }
  },
  async asyncData({ app, route, err }) {
    let regionData,
      listData = []; //列表数据
    let total = 0;
    let loading = true;
    let notYet = true;

    regionData = await resultAreaInfo();
    let params = {
      pageNo: 1,
      pageSize: 10,
      province: "",
      city: "",
      achievementsName: "",
      createTime: ""
    };
    let data = await achievementsList(params);
    if (data.code === 200) {
      listData = data.result.records;
      total = data.result.total;
      loading = false;
      if (data.result.records.length == 0) {
        notYet = false;
      } else {
        notYet = true;
      }
    }
    return {
      regionData: regionData.result,
      listData: listData,
      total: total,
      notYet: notYet,
      loading: loading
    };
  },
  created() {
    // this.getArea();
    // this.getList();
  },
  methods: {
    async getArea() {
      resultAreaInfo().then(res => {
        this.regionData = res.result;
      });
    },
    // 列表接口
    async getList(type) {
      if (type) {
        this.pageNo = 1;
      }
      let provinceValue = "";
      let cityValue = "";
      if (this.provinceLevel > -1) {
        provinceValue = this.regionData[this.provinceLevel].value;
      }
      if (this.cityLevel > -1) {
        cityValue = this.regionData[this.provinceLevel].children[this.cityLevel]
          .value;
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: 10,
        province: provinceValue,
        city: cityValue,
        achievementsName: this.searchKey,
        createTime: this.createTime
      };
      let listData = await achievementsList(params);
      if (listData.code === 200) {
        this.listData = listData.result.records;
        this.total = listData.result.total;
        this.loading = false;
        if (listData.result.records.length == 0) {
          this.notYet = false;
        } else {
          this.notYet = true;
        }
      }
    },
    // 更多收起切换
    MoreEvent(value) {
      if (this.$refs[value + "1"].innerHTML === "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    // 省级清空
    provinceEmpty() {
      this.provinceLevel = -1;
      this.cityLevel = -1;
      this.areaLevel = -1;
      this.getList(1);
    },
    // 省级地区切换
    provinceActive(index) {
      this.provinceLevel = index;
      this.getList(1);
    },
    // 市级清空
    cityEmpty() {
      this.cityLevel = -1;
      this.areaLevel = -1;
      this.getList(1);
    },
    // 市级地区切换
    cityActive(index) {
      this.cityLevel = index;
      this.getList(1);
    },

    // 跳转详情
    toDetail(id) {
      this.$router.push({
        path: `/achievDetail/${id}`
      });
    },
    // 搜索高亮
    searchHighlight(val) {
      if (this.searchKey == "") {
        return val;
      } else {
        return val.replace(
          new RegExp(this.searchKey, "g"),
          "<em style='color: red;font-style:normal;'>" +
            this.searchKey +
            "</em>"
        );
      }
    },
    // 切换分页
    changePageNo(value) {
      this.pageNo = value;
      this.getList();
    },
    // 判断字符长度，是否要展示折叠
    judgeWords(data, index) {
      if (data == undefined) {
        return false;
      }
      // 1省级2市级3区级4部门
      if (index == 1) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].value;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 2) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].value;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped src="../policyInformation/policyNotice.less"></style>
